<template>
  <el-dialog v-model="dialogVisible" title="选择菜品">
    <div style="margin-top: -20px; margin-bottom: 10px">
      <el-input v-model="initParam.searchKw" placeholder="请输入菜品名称或助记码搜索" :prefix-icon="Search" />
    </div>

    <div class="selector-container">
      <tree-filter
        :data="treeFilterData"
        :default-value="initParam.ctegoryId"
        label="name"
        :show-search="false"
        @change="changeTreeFilter"
      />
      <div class="table-box">
        <pro-table
          ref="proTable"
          :columns="columns"
          :init-param="initParam"
          :pagination="false"
          :request-api="getGoodsList"
          title="菜品列表"
          :tool-button="false"
        />
      </div>
    </div>
    <div class="selector-footer">
      <div class="flx-justify-between pt10 pb10">
        <span>已选择(450)</span>
        <el-button type="danger">清空</el-button>
      </div>
      <div class="inner">
        <el-tag v-for="tag in tags" :key="tag.id" class="mr6 mb6" closable @close="handleDelTag(tag.id)">
          {{ tag.name }}
        </el-tag>
      </div>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="selectGoods">
import ProTable from '@/components/ProTable/index.vue'
import TreeFilter from '@/components/TreeFilter/index.vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
import { getGoodsList, getWaresCategoryListAPI } from '~/src/api/goods'
import { Inventory } from '~/src/api/interface/goods'
import { ColumnProps, ProTableInstance } from '../ProTable/interface'

interface dialogProps {
  isView: boolean
  row: Partial<Inventory.ResGoodsSpecificationsList>
  api?: (params: any) => Promise<any>
  getTableList?: () => void
}
// interface tagInfo {
//   name: string;
//   id: number;
// }

const tags: any[] = [
  { id: 1, name: '我是名称来的', ctegoryName: '助记码', price: 400, goodsStatus: 1 },
  { id: 2, name: '我是名称来的', ctegoryName: '助记码', price: 400, goodsStatus: 1 },
  { id: 3, name: '我是名称来的', ctegoryName: '助记码', price: 400, goodsStatus: 1 },
  { id: 4, name: '我是名称来的', ctegoryName: '助记码', price: 400, goodsStatus: 1 },
  { id: 5, name: '我是名称来的', ctegoryName: '助记码', price: 400, goodsStatus: 1 },
]
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
// 表格 DOM 元素
const proTable = ref<ProTableInstance>()
const initParam = reactive({ ctegoryId: '', searchKw: '', pageSize: 999 })
const treeFilterData = ref<any>([])

// 表格配置项
const columns: ColumnProps<Inventory.ResGoodsList>[] = [
  { type: 'selection', width: 55 },
  { prop: 'name', label: '菜品名称' },
  { prop: 'ctegoryName', label: '助记码' },
]

const getTreeFilter = async () => {
  const { data } = await getWaresCategoryListAPI({ pageSize: 998, pageNum: 1 })
  treeFilterData.value = data.list
  // initParam.ctegoryId = treeFilterData.value[1].id;
}

const handleDelTag = (tag: number) => {
  console.log('tagDel', tag)
}

// 树形筛选切换
const changeTreeFilter = (val: any) => {
  ElMessage.success('请注意查看请求参数变化!')
  proTable.value!.pageable.pageNum = 1
  initParam.ctegoryId = val
}

const dialogVisible = ref(false)
const dialogProps = ref<dialogProps>({
  isView: false,
  row: {},
})

// 接收父组件传过来的参数
const acceptParams = (params: dialogProps) => {
  dialogProps.value = params
  dialogVisible.value = true
  getTreeFilter()
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await dialogProps.value.api!(dialogProps.value.row)
      ElMessage.success({ message: `选择菜品成功！` })
      dialogProps.value.getTableList!()
      dialogVisible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}

// watchEffect(() => {
//   if (dialogVisible.value && tags.length !== 0 && proTable.value) {
//     for (const obj1 of proTable.value.tableData) {
//       for (const obj2 of tags) {
//         if (obj1.id === obj2.id) {
//           proTable.value.element!.toggleRowSelection(obj2, true);
//         }
//       }
//     }
//   }
// });

defineExpose({
  acceptParams,
})
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
